<template>
  <div>
    <el-form
      ref="driverjobform"
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()">
      <el-row>
        <el-form-item class="el-col-7" prop="id" label="作业编号">
          <el-input v-model="dataForm.id" placeholder="作业编号" clearable></el-input>
        </el-form-item>
        <el-form-item class="el-col-7" prop="divername" label="司机姓名">
          <el-input v-model="dataForm.divername" placeholder="司机姓名" clearable></el-input>
        </el-form-item>
        <el-form-item class="el-col-7" prop="status" label="作业状态">
          <el-select v-model="dataForm.status" placeholder="作业状态">
            <el-option label="请选择" value="0" aria-selected="true" ></el-option>
            <el-option label="待提货" value="1" ></el-option>
            <el-option label="在途" value="2" ></el-option>
            <el-option label="已交付" value="3" ></el-option>
            <el-option label="已作废" value="4" ></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item class="el-col-8" prop="taskTransportId" label="传输任务编号">
          <el-input v-model="dataForm.taskTransportId" placeholder="传输任务编号" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="el-button--primary" @click="getDataList()">搜索</el-button>
          <el-button class="el-button--warning" @click="driverjobresetdateform('driverjobform')">重置</el-button>
        </el-form-item>
      </el-row>

    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="id"
        header-align="center"
        align="center"
        label="作业编号">
      </el-table-column>
      <el-table-column
        prop="divername"
        header-align="center"
        align="center"
        label="司机姓名">
      </el-table-column>
      <el-table-column
          prop="coreOrg"
          header-align="center"
          align="center"
          label="所属运转中心">
      </el-table-column>
      <el-table-column
          prop="license"
          header-align="center"
          align="center"
          label="车牌号">
      </el-table-column>
      <el-table-column
        prop="planDepartureTime"
        header-align="center"
        align="center"
        label="计划发车时间">
      </el-table-column>
      <el-table-column
        prop="actualArrivalTime"
        header-align="center"
        align="center"
        label="实际到达时间">
      </el-table-column>
      <el-table-column
        prop="taskTransportId"
        header-align="center"
        align="center"
        label="运输任务编号">
      </el-table-column>
      <el-table-column
        prop="status"
        header-align="center"
        align="center"
        label="作业状态">
        <tmplate slot-scope="scope">
          <span>{{ scope.row.status == 1 ? '待提货' : scope.row.status == 2 ? '在途' : scope.row.status == 3 ? '已交付' : '已报废' }}</span>
        </tmplate>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script src="src/api/work.js"></script>
<script>
import {getDriverJobList} from "@/api/work";

export default {
  data() {
    return {
      dataForm: {
        id: '',
        divername: '',
        status: '',
        taskTransportId: '',
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: null,
      dataListLoading: false,
      dataListSelections: [],
    };
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    driverjobresetdateform() {
      this.$refs['driverjobform'].resetFields();
      this.getDataList();
    },
    // 获取数据列表
    getDataList() {
      let params = {
        'pageno': this.pageIndex,
        'pagesize': this.pageSize,
        'id': this.dataForm.id,
        'divername': this.dataForm.divername,
        'status': this.dataForm.status,
        'taskTransportId': this.dataForm.taskTransportId,
      }
      getDriverJobList(params).then(({data}) => {
        console.log(data);
          if (data && data.code == 0) {
            this.dataList = data.page.rows
            this.totalPage = data.page.total
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
        .catch((err) => {
          this.$message.error("请求出错了：" + err);
        });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },



  },
};
</script>
